<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<!-- 1.画圆形
		     2.画正三角形
		思路1： html   div元素
		      css     倒角，必须有边框
		思路2：html    div元素  #triangle
		      css      斜边
			           不设置宽高
					   左边框：50像素实线红色   transparent
					   右边框：50像素实线黄色
					   下边框：50像素实线蓝色、透明度 .3
					   颜色值：rgba(255,255,0,.3)
			 -->
			 <style>
				 /*1.画圆*/
			div#circle{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				border-radius: 50%;
				/*边框阴影属性 box-shadow属性*/
				box-shadow: 10px 5px 100px 10px red inset;
			}
			/*2.正三角形*/
			div#triangle{
				width: 0;
				/* border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid rgba(0, 0, 255, .3); */
				/*两行:全部设置为透明色，上面的三角设置颜色*/
				border: 50px solid transparent;
				border-left-color:rgba(0, 0, 255, .3);
			}
			input{
				outline: 1px soild red;
				outline:0;/*去掉边框效果，通配选择器中*/
			}
			 </style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		文本框：<input type="text">
	</body>
</html>